<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="echarts.min1.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script>
    var dom = document.getElementById("main");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var val1 = [];
    var val2 = ['最新价','昨结算','涨跌额','涨跌幅','今开价','最高','最低','成交量','持仓量'];
    var data1 = [];
    var n1="中兵红箭,9.030,8.050,8.860,8.860,7.960,8.860,0.000,19310604,167275265.620,3274400,8.860,8900,8.850,5200,8.840,46300,8.830,53100,8.820,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:05:03,00";
    var n2="深华发Ａ,15.270,14.050,15.460,15.460,14.710,15.460,0.000,5248285,80678997.100,657000,15.460,1900,15.450,800,15.400,500,15.380,10600,15.360,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:05:03,00";
    var n3="深大通,20.370,20.650,22.720,22.720,20.370,22.720,0.000,3418119,75540121.320,2260062,22.720,18100,22.710,6000,22.700,100,22.690,400,22.660,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:05:03,00";
    var n4="纳尔股份,24.300,23.250,25.580,25.580,24.300,25.580,0.000,2476743,61877039.410,329823,25.580,100,25.560,200,25.550,1200,25.500,600,25.480,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:05:03,00";
    var n5="荣华实业,5.700,5.790,6.370,6.370,5.660,6.370,0.000,66795101,407006889.000,1059795,6.370,7400,6.360,19200,6.350,15900,6.340,4000,6.330,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:00:00,00";
    var n6="天和防务,18.490,18.270,20.100,20.100,18.390,20.100,0.000,9393109,186450686.620,1222998,20.100,9300,20.090,19300,20.080,19300,20.070,9300,20.060,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:05:03,00";
    var n7="纵横通信,41.080,41.350,45.490,45.490,40.870,45.490,0.000,2710259,117346625.000,998941,45.490,3600,45.440,200,45.400,1700,45.200,600,45.080,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:00:00,00";
    var n8="中欣氟材,11.210,10.190,11.210,11.210,11.210,11.210,0.000,2410,27016.100,5047790,11.210,71700,11.200,21600,11.190,7500,11.180,4400,11.170,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:05:03,00";
    var n9="合力科技,27.260,24.780,27.260,27.260,27.260,27.260,0.000,32018,872811.000,1590482,27.260,14700,27.250,1100,27.230,200,27.220,300,27.200,0,0.000,0,0.000,0,0.000,0,0.000,0,0.000,2017-12-07,15:00:00,00";
    var arrs = [];
    arrs.push(n1.split(','),n2.split(','),n3.split(','),n4.split(','),n5.split(','),n6.split(','),n7.split(','),n8.split(','),n9.split(','));
    for(var vl in arrs){
        val1.push(arrs[vl][0]);
        //先X轴，后Y轴
        var values = ['最新价',arrs[vl][0],arrs[vl][3]];
        if((arrs[vl][3] - arrs[vl][1])>0){
            var datas = {
                value:values,
                label: {normal: {textStyle: {color: 'red'}}}
            };
        }else{
            var datas = {
                value:values,
                label: {normal: {textStyle: {color: 'green'}}}
            };
        }
        data1.push(datas);
    }
//    data1 = [{value:['最新价','中兵红箭','123'],label: {normal: {textStyle: {color: 'red'}}}}];
    var rd = '';


    option = {
        backgroundColor: '#000',
        animation: false,
        xAxis: {
            type: 'category',
            data: val2,
            min: 'dataMin',
            max: 'dataMax',
            position:'top',
            axisLine: {
                lineStyle: {
                    color:'#fff',
                    backgroundColor:'#000',
                    borderColor:'red'
                }
            },
            axisTick:{
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: val1,
            min: 'dataMin',
            max: 'dataMax',
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisLine: {
                lineStyle: {
                    color:'#fff',
                    backgroundColor:'#000'
                }
            },
            axisTick:{
                show: false
            }
        },
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 0,
                end: 50,
                zoomLock:true
            },
            {
                type: 'inside',
                yAxisIndex: [0],
                start: 0,
                end: 50,
                zoomLock:true
            }
        ],
        series: [{
            name: 'Punch Card',
            type: 'heatmap',
            data: data1,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 700,
                        color: '#fff',
                        backgroundColor:"#000"
                    }
                }
            },
            itemStyle: {
                normal: {
                    show: true,
                    color:"transparent",
                    borderWidth:1
                }
            }
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</html>